<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/spring.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<c:set var="BasePath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="Plugins" value="${pageContext.request.contextPath}/res/plugins"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>规格信息</title>
<link href="${Plugins}/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="${Plugins}/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
<script src="${Plugins}/jquery/jquery-1.4.4.min.js"	type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/common/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${BasePath}/res/js/ligerCommon.js"></script>
<script src="${BasePath}/res/js/common/jquery.validate.method.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/product/commodityCat.js" type="text/javascript"></script>
<style type="text/css">
    body{ font-size:12px;}
    .l-table-edit {}
    .l-table-edit-td{ padding:4px;}
    .l-button-submit,.l-button-test{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    .l-verify-tip{ left:230px; top:120px;}
    .p-tab .s-lab{font-size:12px;font-family:"微软雅黑",​"宋体",​Arial,​sans-serif;}
	input.l-textarea{width:170px;height:20px;font-size:12px;}
	input.l-textarea2{float:left;width:170px;height:20px;font-size:12px;margin-top: 11px;}
	 .navbar {
		height: 20px;
		border-bottom: #E6E6E6 solid 1px;
		line-height: 20px;
	}
	.li-spec-option{float:left;width:150px}
	.li-spec-option-del{float:left;width:50px}
</style>
</head>
<body style="padding:10px">
<div class="navbar">
		<span>您当前的位置：</span>
		商品管理  &gt;规格列表 &gt; 修改规格
</div>
<form name="form1" method="post" action="addToSpec.do" id="form1">
<input type="hidden" id="opType" name="opType" value="${opType}" />
	<input type="hidden" id="catNo" name="catNo" value="${spec.catNo}" />
	<input type="hidden" id="specNo" name="specNo" value="${spec.specNo}" />
<br>
<table cellpadding="0" cellspacing="0" class="l-table-edit p-tab" >
	<tr>
        <td align="right" class="l-table-edit-td s-lab"><font  color="red">*</font>分类名称:</td>
        <td align="left" class="l-table-edit-td s-lab">
        <div id="catDiv"></div>
        </td>
        <td align="left"></td>
    </tr>
    <tr>
        <td align="right" class="l-table-edit-td s-lab"><font  color="red">*</font>规格名称:</td>
        <td align="left" class="l-table-edit-td s-lab"><input maxlength="10" id="specName" name="specName"  type="text" class="l-textarea"  value="${spec.specName}" validate="{required:true,minlength:1,maxlength:10}" /></td>
        <td align="left"></td>
    </tr>
    <tr>
        <td align="right" class="l-table-edit-td s-lab" style="padding-top: 17px;vertical-align: top;"><font  color="red">*</font>规格值:</td>
        <td align="left" class="l-table-edit-td s-lab">
		<ul id="optionName" style="list-style:none;width: 400px;">
			<c:if test="${spec.specValOptions != null}">
	 			<c:forEach var="specValOption" items = "${spec.specValOptions}" varStatus="status">
					<li>
						<input type="hidden" name="optionNoold" value="${specValOption.optionNo }" >
						<input maxlength="10" id="optionNameold${status.index} }" onfocus="oldValue = this.value;" name="optionNameold" onblur='updateOption(this);' style="float: left;font-size:14px;margin-top: 11px;" value="${specValOption.optionName }" type="text" class="l-textarea" validate="{required:true,minlength:1,maxlength:10}" />
						<c:if test="${status.count != 1}">
							<input type='button' onclick='toDelOption("${specValOption.optionNo }",this);' value='删除' name='delSpecBtn' class='l-button l-button-test' />
						</c:if>
		       	 		<input type="button" onclick="addli();" value="新增规格值" name="addOptsBtn" class="l-button l-button-test" />
					</li>
				</c:forEach>
	 		</c:if>
		</ul>
		
		</td>
        <td align="left"></td>
    </tr>
    <tr>
        <td align="right" class="l-table-edit-td s-lab"></td>
        <td align="left" class="l-table-edit-td s-lab">
        
        </td>
        <td align="left"></td>
    </tr>
	<tr height="15"></tr>
</table>


<input type="submit" value="保存" id="Button1" class="l-button l-button-submit" /> 
<input type="button" value="取消" name="tests"  id="tests" class="l-button l-button-test" />
</form>
<div style="display:none">
<!--  数据统计代码 --></div>

<script type="text/javascript">
var basePath="${BasePath}";

var oldValue = "";
var isUpdate = true;
//修改
function updateOption(o) {
	$("input[name=optionName],[name=optionNameold]").not($(o)).each(function() {
		if(o.value == $(this).val() && (val != "" || val != null)){
			$.ligerDialog.warn('规格值重复');
			o.value = oldValue;
			isUpdate = false;
			return false;
		};
	});
}
var i = 1;
function addli() {
	var id = 'optionName'+i;
	var li = "<li>";
	li += "<input id='"+id+"' maxlength='10' name='optionName' onchange='valiValue(this);' type='text' style='float: left;font-size:14px;margin-top: 11px;' class='l-textarea' validate='{required:true,minlength:1,maxlength:10}' />";
	li += "<input type='button' onclick='this.parentNode.parentNode.removeChild(this.parentNode);' value='删除' name='delSpecBtn' class='l-button l-button-test' />";
	li += "<input type='button' onclick='addli();' value='新增规格值' name='addOptsBtn' class='l-button l-button-test' />";
	li += "</li>";
	$("#optionName").append(li);
	i++;
}

function valiValue(o) {
	var val = o.value;
	$("input[name=optionName],[name=optionNameold]").not($(o)).each(function() {
		if(val == $(this).val() && (val != "" || val != null)){
			$.ligerDialog.warn('规格值重复');
			o.value = "";
		};
	});
}

//分类
var catNo = "${spec.catNo}";
$(function() {
	//初始加载分类
	readonlyCat(catNo);
});

/*删除选项*/
function toDelOption(optionNo,o) {
  		$.post("deleteOption.do?optionNo=" + optionNo, function(data) {
  			if(!data || data.toLowerCase() == "fail") {
  				$.ligerDialog.warn("操作失败");
  				return false;
  			} else if(data.toLowerCase() == "success") {
  				$.ligerDialog.warn("操作成功");
  				o.parentNode.parentNode.removeChild(o.parentNode);
  			} else {
  				$.ligerDialog.warn(data);
  				return false;
  			}
  		});
}

$(function() {
	//validate
	$.metadata.setType("attr", "validate");
	var v = $("form").validate(
	{
		errorPlacement : function(lable, element) {
			lable.ligerHideTip();
			if (element.hasClass("l-textarea")) {
				element.ligerTip({
					content : lable.html(),
					target : element[0]
				});
			} else if (element.hasClass("l-text-field")) {
				element.parent().ligerTip({
					content : lable.html(),
					target : element[0]
				});
			} else {
				lable.appendTo(element.parents("td:first").next("td"));
			}
		},
		success : function(lable) {
			lable.ligerHideTip();
			lable.remove();
		},
		submitHandler : function() {
			$("form .l-text,.l-textarea,.l-textarea2").ligerHideTip();
			var isoptionName = true;
			$("input[name=optionName],[name=optionNameold]").each(function() {
				if($(this).val() == "" || $(this).val() == null){
					$.ligerDialog.warn('规格值不能为空');
					isoptionName = false;
					return false;
				};
			});
			if(!isoptionName) return isoptionName;
			
			var options = {
							type : 'POST',
							beforeSend : function() {
								$("#form1").find(":submit,:button").attr("disabled", true);
							},
							success : function(data) {
								if (data == "success") {
									window.parent.f_tip('修改成功');
									window.location.href = "../../product/specmgt/specList.do";
									close_liger_tab();
								} else {
									window.parent.f_tip('修改失败');
								}
							}
						}, $form1 = $("#form1");
							$form1.ajaxSubmit(options);
							return false;
			}
	});
});
// 取消
$("#tests").click(function() {
	close_liger_tab();
	return false;
});
</script>
</body>
</html>